import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:netease_music/player/controller/audio_player_controller.dart';
import 'package:netease_music/theme/custom_colors.dart';
import 'package:netease_music/widget/my_cached_network_image.dart';

class BottomPlayerBar extends StatefulWidget {
  const BottomPlayerBar({super.key});

  @override
  State<BottomPlayerBar> createState() => _BottomPlayerBarState();
}

class _BottomPlayerBarState extends State<BottomPlayerBar> {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Material(
        color: Theme.of(context).extension<CustomColors>()!.bottomPlayerBg,
        child: InkWell(
          onTap: () {
            Get.toNamed(
              '/fullPlayer',
            );
          },
          splashColor: Colors.grey.withOpacity(0.3), // 水波纹颜色
          highlightColor: Colors.grey.withOpacity(0.1), // 按压高亮色
          child: GetBuilder<AudioPlayerController>(
            builder: (controller) {
              if (controller.currentSong.isEmpty) {
                return const SizedBox.shrink();
              }
              return Column(
                children: [
                  SizedBox(
                    height: 48,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 0,
                        horizontal: 8,
                      ),
                      child: Row(
                        children: [
                          MyCachedNetworkImage(
                            imageUrl: controller.currentSong['picUrl'],
                            x: 160,
                            y: 160,
                            width: 40,
                            height: 40,
                          ),
                          const SizedBox(width: 8),
                          Expanded(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  controller.currentSong['name'] ?? '未播放',
                                  style: Theme.of(context).textTheme.bodyLarge,
                                ),
                                Text(
                                  (controller.currentSong['artists'] as List)
                                      .join(' - '),
                                  style: Theme.of(context).textTheme.bodyMedium,
                                ),
                              ],
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            iconSize: 28,
                            icon: Icon(
                              Icons.queue_music,
                              color: Theme.of(context).primaryColor,
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              controller.isPlaying
                                  ? Icons.pause_circle
                                  : Icons.play_circle,
                              color: Theme.of(context).primaryColor,
                            ),
                            iconSize: 28,
                            onPressed: () {
                              controller.togglePlayPause();
                            },
                          ),
                          IconButton(
                            onPressed: () {},
                            iconSize: 28,
                            icon: Icon(
                              Icons.skip_next,
                              color: Theme.of(context).primaryColor,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  LayoutBuilder(
                    builder: (_, constraints) {
                      final total = controller.duration.inMilliseconds;
                      final current = controller.position.inMilliseconds;
                      final progress = total == 0 ? 0.0 : current / total;

                      return Stack(
                        children: [
                          Container(
                            width: constraints.maxWidth,
                            height: 2,
                            color: Colors.grey.shade300,
                          ),
                          Container(
                            width: constraints.maxWidth * progress,
                            height: 2,
                            color: Theme.of(context).primaryColor,
                          ),
                        ],
                      );
                    },
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}
